<template>
    <div class="pie-main" ref="pieMain"></div>
</template>
<script>
// https://github.com/apache/incubator-echarts/blob/master/index.js
import * as echarts from 'echarts/core'; // 引入柱状图
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import VueBus, {SET_MENU_SIZE} from '@/utils/VueBus';

export default {
    name: 'pieMain',
    props: {
        dataSource: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        isUpdate: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            myChart: null
        };
    },
    watch: {
        dataSource(value = []) {
            const myChart = this.myChart;
            // const data = value.map(item => {
            //     if (item.name === '还款中') {
            //         return {...item, selected: true};
            //     }
            //     return {...item};
            // });
            if (myChart) {
                myChart.setOption({
                    series: {data: value}
                });
            }
        }
    },
    mounted() {
        const myChart = echarts.init(this.$refs['pieMain']);
        const option = {
            title: {
                // text: '本账单周期借款状态统计',
                text: this.title,
                left: 'left',
                // padding: [15, 0, 0, 15],
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            // tooltip: {
            //     trigger: 'item',
            //     position: 'right',

            //     // extraCssText: 'z-index: 999999999999999!important;background: #f00',
            //     formatter: '{a} <br/>{b} : {c} ({d}%)'
            // },
            label: {
                // position: 'inner',
                formatter: '{b}\n{c}\n({d}%)' // 格式化 标签
            },
            // align: 'right',
            // 需要引入 才有图例
            legend: {
                // orient: 'vertical',
                // left: 'left',
                // y: '65%',
                top: 'bottom',
                padding: 0,
                data: ['还款中', '已结清', '已逾期']
            },
            series: [
                {
                    name: '还款状态',
                    type: 'pie',
                    radius: '60%', // 饼图大小
                    // center: ['50%', '60%'],
                    center: ['50%', '50%'],
                    label: {
                        position: 'outer',
                        alignTo: 'labelLine',
                        bleedMargin: 5
                        // position: 'outer',
                        // alignTo: 'none',
                        // bleedMargin: 5
                    },
                    data: [
                        // {value: 0, name: '还款中'},
                        // {value: 0, name: '已结清'},
                        // {value: 0, name: '已逾期'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option, true);
        this.myChart = myChart;
        window.addEventListener('resize', this.onResize);
        VueBus.$on(SET_MENU_SIZE, this.onSetMenuSize);
    },
    destroyed() {
        this.myChart = null;
        window.removeEventListener('resize', this.onResize);
        VueBus.$off(SET_MENU_SIZE, this.onSetMenuSize);
    },
    methods: {
        onSetMenuSize() {
            clearTimeout(this.timeoutid);
            this.timeoutid = setTimeout(this.onResize, 300);
        },
        onResize() {
            this.myChart.resize();
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.pie-main {
    width: 100%;
    height: $--height-home-card;
    position: relative;
    z-index: 9;
}
</style>
